<template>
    <view class="page-member-index">
        <view>
            <u-image :src="proxy.$icon.vipbanner" width="100%" height="190rpx" mode="widthFix"></u-image>
        </view>
        <view class="card">
            <view class="flex-between mb-4">
                <view>
                    <text v-if="userInfo.isExpire && userInfo.membersDate" class="c-red">会员已过期</text>
                    <text v-if="userInfo.membersDate">会员到期时间：{{ userInfo.membersDate}}</text>
                    <text v-else class="c-red">暂不是会员！</text>
                </view>
                <view @click="proxy.$util.gotoPage('/packageB/bill/list')">开通记录</view>
            </view>
            <u-row gutter="15">
                <u-col :span="colSpan" v-for="(item,index) in actionSheet.list" :key="index">
                    <view class="card-item" :class="actionSheet.current == index ? 'current' : ''" @click="getCard(item,index)">
                        <view class="name">{{ item.cardName }}</view>
                        <view class="price"><text class="unit">￥</text>{{ item.price }}</view>
                        <view class="days">{{item.durationValue}}{{ proxy.$util.setName(item.durationType, optionData.durationType) }}</view>
                    </view>
                </u-col>
            </u-row>
            <view class="my-4 text-center">
                <u-checkbox-group style="display:inline-block;">
                    <u-checkbox v-model="isAgree" label-size="26rpx" active-color="#24BCB8 ">
                        我同意并了解
                        <text class="c-cyan" @click.stop="refShowAgreement.init('member')">《会员服务协议》</text>
                    </u-checkbox>
                </u-checkbox-group>
            </view>
            <u-button class="btn-deepCyan" shape="circle" @click="toPay">立即开通</u-button>
        </view>
        <view class="fly-card">
            <div class="header flex-between">
                <view class="title">会员权益</view>
                <view class="desc">开通可畅享多种会员权益</view>
            </div>
            <view class="item" v-for="(item,index) in rightsList" :key="index">
                <view class="thumb"><u-image :src="proxy.$icon[item.icon]" width="92rpx" height="92rpx" /></view>
                <view class="content">
                    <view class="title">{{ item.title }}</view>
                    <view class="desc">{{ item.desc }}</view>
                </view>
            </view>
        </view>         
        <show-agreement ref="refShowAgreement" @confirm="confirmAgreement" />
    </view>
</template>
<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app';
import showAgreement from '@/components/showAgreement/index.vue';
let refShowAgreement = ref();
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
import { useAppStore } from '@/stores/app'
import { useOptionData } from '@/stores/optionData';
let appStore = useAppStore();
const optionDataStore = useOptionData();
let userInfo = ref({});
let colSpan = ref(4);
let isAgree = ref(false);
let actionSheet = reactive({
    isShow: false,
    current: 0,
    info: {cardName: '年卡', price: 'XXX'},
    list: [],
});
let rightsList = reactive([
    {icon: 'infinite', title: '无限次报名活动', desc: '不限城市、不限次数、不限类型、线上线下均可报名'},
    {icon: 'initiatives', title: '自主发起活动',desc: '自定书籍、时间、地点(也可选择官方合作场地)，在平台上发起活动'},
    {icon: 'association', title: '会员社群',desc: '加入同城会员社群、活动小群等读书社群'},
    {icon: 'customized', title: '参与制定活动主题',desc: '在群内推荐书籍/主题，高票官方发起活动'},
    {icon: 'customized', title: '体验不满意可全额退款',desc: '新用户注册30天内，且报名参加活动≤1场，不满意可退款。超过30天或超过1场则无法退款'},
    {icon: 'other', title: '享受平台其他功能',desc: '如笔记、推书、文章等内容创作，加入/建立读书小组等'},
])
let form = reactive({
    userId: null,
    cardId: null,
});
let optionData = reactive({});
const getInitData = async () => {
    optionData.durationType = await optionDataStore.getDictList('duration_type');
};
const confirmAgreement = (val) => {
    isAgree.value = true;
}
const getCardList = () => {
    proxy.$http('get', '/admin/membershipCards/page', {current:1, size:30},(data,msg)=>{
        actionSheet.list = data.records.map(item => {
            item.text = item.cardName + '（￥'+ item.price +'）';
            return item;
        });
        actionSheet.list = actionSheet.list.filter(item => item.cardId < 5);
        colSpan.value = Math.floor(12/actionSheet.list.length);
        actionSheet.info = actionSheet.list.find(item => item.durationType == 'YEAR');
        form.cardId = actionSheet.info.cardId;
    });
};
const getCard = (item,index) => {
    actionSheet.current = index;
    actionSheet.info = item;
    form.cardId = item.cardId; 
};
const toPay = () => {
    if(!isAgree.value){
        uni.showToast({title: '请勾选并同意《会员服务协议》', icon: 'none'})
        return;
    }
	uni.login({
		success: response => {
            let strBody = {type: userInfo.value.userNew, userId: form.userId};
            let params  = {
                body: JSON.stringify(strBody), // new新开卡，xu续费
                userId: form.userId,
                relationshipId: form.cardId,
                code: response.code
            };
            appStore.wechatPay(params).then(res => {
                uni.requestPayment({
                    provider: 'wxpay',
                    ...JSON.parse(res),
                    success: successRres => {
                        appStore.getUserInfo().then(res => {
                            userInfo.value = res;
                        });                        
                    }, 
                    error: err => {
                    
                    }
                })
            })			
		},
		fail: () => {
			reject()
		}
	})    
};
onShow(() => {
    userInfo.value = appStore.userInfo;
    form.userId = appStore.userInfo.userId;
    getInitData();
    getCardList();
})
</script>
<style>
/* page{height:100%;background:#fff;} */
</style>